<template>
  <div class="right-wrapper">
    <template v-if="nowOption.id!=='productPicture'">
      <div class="title">{{$t('common.base.title')}}<span>{{$t('common.placeholder.limitInput', {limit: titleMaxLen})}}</span></div>
      <div class="form-type-text-lang">
      <el-input class="title-input" :maxlength="titleMaxLen" v-model="title"></el-input>
      <base-select-language
        v-if="isOpenMultiLanguage"
        :title="$t('common.base.title')"
        :field='nowOption'
        :defaultOption="{
          formType:'text',
        }"
        defaultFormType="text"
        :maxlength="titleMaxLen"
        :defaultValue="title"
        :defaultValueLanguage="displayNameLanguage"
        @save="multiLanguageSave"
      ></base-select-language>
      </div>
      <el-checkbox
        v-if="nowOption.id === 'productRegister'"
        class="title-checkbox"
        v-model="ifRegisterGuide"
        @change="$emit('itemAttrChange', ['productRegister', 'ifRegisterGuide', ifRegisterGuide])">
        {{$t('product.qrcodeSetting.rightComponent.text1')}}
      </el-checkbox>
      <el-checkbox v-else class="title-checkbox" :disabled='nowOption.id==="productPart" || nowOption.id==="knowledgeBase"' v-model="notShowTitle">{{$t('product.qrcodeSetting.rightComponent.text2')}}</el-checkbox>
    </template>
    <span style="display:none;">{{nowOption.name}}</span>
    <template v-if="nowOption.id==='productPicture'">
      <div class="introduce">{{$t('product.qrcodeSetting.rightComponent.text3')}}<el-button type='text' @click="jump">{{$t('product.qrcodeSetting.rightComponent.text4')}}</el-button></div>
    </template>
    <template v-else-if="nowOption.id==='productIntroduction'">
      <div class="introduce">{{$t('product.qrcodeSetting.rightComponent.text5')}}<el-button type='text' @click="jump">{{$t('product.qrcodeSetting.rightComponent.text4')}}</el-button></div>
    </template>
    <template v-else-if="nowOption.id==='selfService'">
      <div class="service">
        <p class="service-title">{{$t('product.qrcodeSetting.rightComponent.text6')}}</p>
        <span class="service-content">{{$t('product.qrcodeSetting.rightComponent.text7')}}</span>
        <el-select style="width:100%;marginTop:12px;" @change="changeEventType" v-model="copyEventIdList" multiple :placeholder="$t('common.placeholder.select')">
          <el-option
            v-for="item in allEventList"
            :key="item.id"
            :label='item.name'
            :value='item.id'
          ></el-option>
        </el-select>
      </div>
      <paas-apply-template ref="paasApplyTemplateRef" :paasList="paasList" @addPaasTemplate="addPaasTemplate"></paas-apply-template>
      <!-- <div class="service">
        <p class="service-title">进度查询</p>
        <span class="service-content">开启进度查询后，用户可以在页面上查看已提交服务进度的请求</span>
        <el-switch
          class="service-switch"
          v-model="isShowProgressQuery"
          @change="handlerChange($event, 'progressQuery')"
          :active-text="isShowProgressQuery ? '启用' : '禁用'"
        ></el-switch>
      </div> -->
      <div class="service">
        <p class="service-title">{{$t('product.setting.qrCodeSet.temComponent.name2')}}</p>
        <span class="service-content">{{$t('product.qrcodeSetting.rightComponent.text8')}}</span>
        <el-switch
          class="service-switch"
          v-model="isShowEnterpriseMall"
          @change="handlerChange($event, 'enterpriseMall')"
          :active-text="isShowEnterpriseMall ? $t('common.base.enableState.0') : $t('common.base.enableState.1')"
        ></el-switch>
      </div>
    </template>
    <template v-else-if="nowOption.id==='productCard'">
      <product-card-item ref="productCardItemRef" :productCardList="productCardList" @updateProductCard="updateProductCard"></product-card-item>
    </template>
    <template v-else-if="nowOption.id==='productInformation'">
      <div class="waring">{{$t('product.qrcodeSetting.rightComponent.text9')}}</div>
      <div class="introduce m-top-30">{{$t('product.qrcodeSetting.rightComponent.text10')}}<el-button type='text' @click="jump">{{$t('product.qrcodeSetting.rightComponent.text11')}}</el-button></div>
      <p class="field-title">{{$t('product.qrcodeSetting.rightComponent.text12')}}</p>
      <ul class="field-wrapper">
        <li v-for="item in copyShowFields" :key="item.fieldName">
          <el-checkbox v-model="item.showFlag" :disabled='item.fieldName === "name"'>
            {{item.displayName}}
            <span class="must" v-if="item.fieldName === 'name'">({{$t('common.base.required')}})</span>
          </el-checkbox>
        </li>
      </ul>
    </template>
    <template v-else-if="nowOption.id==='productVideo'">
      <div class="introduce">{{$t('product.qrcodeSetting.rightComponent.text13')}}<el-button type='text' @click="jump">{{$t('product.qrcodeSetting.rightComponent.text4')}}</el-button></div>
    </template>
    <template v-else-if="nowOption.id==='productInstructions'">
      <div class="introduce">{{$t('product.qrcodeSetting.rightComponent.text14')}}<el-button type='text' @click="jump">{{$t('product.qrcodeSetting.rightComponent.text4')}}</el-button></div>
    </template>
    <template v-else-if="nowOption.id==='onlineService'">
      <div class="customer-service" v-if="imEnabled">
        <h4>{{$t('product.qrcodeSetting.rightComponent.text15')}}</h4>
        <el-select
          style="width:100%;marginBottom:12px;"
          @change="updateCustomerServiceName"
          v-model="customerServiceName_"
          :placeholder="$t('product.qrcodeSetting.rightComponent.text34')"
        >
          <el-option
            v-for="item in customerServiceSource"
            :key="item.value"
            :label="item.text"
            :value="item.value"
          ></el-option>
        </el-select>
        <template v-if="customerServiceName === 'wx'">
          <div class="error-content" v-if="!hasWxAuth">
            {{$t('product.qrcodeSetting.rightComponent.text16')}}<span @click="jumpSetting">{{$t('product.qrcodeSetting.rightComponent.text17')}}</span>
          </div>
          <el-select
            v-else
            style="width:100%;marginBottom:12px;"
            @change="updateWechatServiceUrl"
            v-model="wechatServiceUrl_"
            :placeholder="$t('product.qrcodeSetting.rightComponent.text35')"
          >
            <el-option
              v-for="item in wechatListSource"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>
      </div>
      <div class="introduce">{{$t('product.qrcodeSetting.rightComponent.text18')}}</div>
      <div class="service">
        <p class="service-title">{{$t('product.qrcodeSetting.rightComponent.text19')}}</p>
        <template v-if="rules && rules.length">
          <span class="service-content">{{$t('product.qrcodeSetting.rightComponent.text20')}}<el-button type='text' @click="jump">{{$t('product.qrcodeSetting.rightComponent.text11')}}</el-button></span>
          <el-card class="box-card" v-for="item in rules" :key="item.id">
            <span>{{$t('common.form.type.level')}}：{{item.level}}</span>
            <a href="javascript:;" @click="checkRule(item.id)">{{$t('common.base.view')}}</a>
            <p>{{item.ruleName}}</p>
          </el-card>
        </template>
        <div class="error-wrapper" v-else>
          <i class="error-icon iconfont icon-warning-circle-fill"></i>
          <span class="service-content">{{$t('product.qrcodeSetting.rightComponent.text21')}}<el-button type='text' @click="jump">{{$t('product.qrcodeSetting.rightComponent.text11')}}</el-button></span>
        </div>
      </div>
    </template>
    <template v-else-if="nowOption.id==='enterpriseInformation'">
      <div class="waring">{{$t('product.qrcodeSetting.rightComponent.text9')}}</div>
      <div class="introduce">{{$t('product.qrcodeSetting.rightComponent.text22')}}<el-button type='text' @click="jump">{{$t('product.qrcodeSetting.rightComponent.text11')}}</el-button></div>
    </template>
    <template v-else-if="nowOption.id==='knowledgeBase'">
      <div class="introduce">{{$t('product.qrcodeSetting.rightComponent.text23')}}<el-button type='text' @click="jump">{{$t('product.qrcodeSetting.rightComponent.text4')}}</el-button></div>
    </template>
    <template v-else-if="nowOption.id==='productPart'">
      <div class="introduce">{{$t('product.qrcodeSetting.rightComponent.text24')}}<el-button type='text' @click="jump">{{$t('product.qrcodeSetting.rightComponent.text4')}}</el-button></div>
    </template>
    <template v-else-if="nowOption.id==='companyInfo'">
      <div class="introduce">{{$t('product.qrcodeSetting.rightComponent.text22')}}<el-button type='text' @click="jump">{{$t('product.qrcodeSetting.rightComponent.text11')}}</el-button></div>
    </template>
    <template v-else-if="nowOption.id==='projectManage'">
      <div claas="project-field">
        <div class="title">{{$t('product.setting.qrCodeSet.createTemplate.projectTitle')}}</div>
        <el-select 
          multiple 
          v-model="projectInfo.projectFieldData" 
          value-key="fieldName"
          :placeholder=" $t('product.setting.qrCodeSet.createTemplate.projectPlaceholder')" 
          style="width:100%; margin-bottom:12px;"
          maxlength="15"
          @change="onChangProject"
        >
          <el-option
            v-for="item in projectFields"
            :key="item.fieldName"
            :label="item.displayName"
            :value="item"
          ></el-option>
        </el-select>
      </div>
      <div claas="task-field">
        <div class="title">{{$t('product.setting.qrCodeSet.createTemplate.projectTaskTitle')}}</div>
        <el-select
          multiple 
          v-model="projectInfo.taskFieldData" 
          value-key="fieldName"
          :placeholder=" $t('product.setting.qrCodeSet.createTemplate.projectTaskPlaceholder')"  
          style="width:100%;margin-bottom:12px;"
          maxlength="15"
          @change="onChangProject"
        >
          <el-option
            v-for="item in taskFields"
            :key="item.fieldName"
            :label="item.displayName"
            :value="item"
          ></el-option>
        </el-select>
      </div>

     
    </template>
    <template v-else-if="nowOption.id==='onlineMall'">
      <div class="introduce">{{$t('product.qrcodeSetting.rightComponent.text25')}}<el-button type='text' @click="jump">{{$t('product.qrcodeSetting.rightComponent.text11')}}</el-button></div>
    </template>
    <template v-else-if="nowOption.id.includes('images')">
      <div class='upload-img'>{{$t('common.base.uploadImg')}}</div>
      <div class="introduce font-12 img-text">{{$t('product.qrcodeSetting.rightComponent.text26', {num1: '750', num2: '20', num3: '50'})}}</div>
      <el-upload
        action="#"
        list-type="picture-card"
        accept=".jpg,.jpeg,.png"
        :on-preview="handlePictureCardPreview"
        :before-upload="onBeforeUploadImage"
        :http-request="UploadImagePic"
        :file-list="imageArray"
        :on-exceed="onExceedPic"
        :limit="20"
        multiple
      >
        <i class="el-icon-plus"></i>{{$t('product.qrcodeSetting.rightComponent.text27')}}
        <div slot="file" slot-scope="{file}" class="custom-wrapper">
          <ul>
            <li>{{$t('product.qrcodeSetting.rightComponent.text28', {data1: getImageIndex(file.id)})}}</li>
            <li class="img-name">{{$t('common.base.image')}} <span>{{file.filename}}</span></li>
            <li class="img-link">
              <span>{{$t('common.base.link')}}</span>
              <el-button type="text" @click="linkOpen(file)">{{file.linkUrl?file.linkUrl:$t('product.qrcodeSetting.rightComponent.text29')}}</el-button>
              <i @click="link('')" class="iconfont icon-circle-delete" v-show="file.linkUrl"></i>
            </li>
          </ul>
          <div class="custom-right">
            <p @click="delImage(file.id)">{{$t('common.base.delete')}}</p>
            <div class="img">
              <img :src="file.url">
            </div>
          </div>
        </div>
      </el-upload>
    </template>
    <template v-if="['productPart', 'knowledgeBase', 'productInstructions'].includes(nowOption.id)">
      <el-checkbox class="linkmanonly title-checkbox" v-model="onlyCustomerLinkmanShow" :true-label="1" :false-label="0">{{$t('product.qrcodeSetting.rightComponent.text30')}}</el-checkbox>
    </template>
    <!-- <div v-if="nowOption.id==='selfService'" class="product-service"> -->
    <!-- <div v-if="nowOption.id==='selfService'" class="product-service">
      <div class="product-title">产品服务记录</div>
      <el-checkbox
        class="product-checkbox"
        v-model="isGetProductEventList"
      >
        允许客户查看服务记录
      </el-checkbox>
      <el-select v-if="isGetProductEventList && !grayFunctionData.SUPER_SERVICE_RECORD" v-model="isSelectSelfHelp" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div> -->
    <div v-if="nowOption.id==='selfService'" class="service">
      <p class="service-title">{{$t('product.qrcodeSetting.rightComponent.text31')}}</p>
      <span class="service-content">{{$t('product.qrcodeSetting.rightComponent.text32')}}</span>
      <el-switch
        class="service-switch"
        v-model="isGetProductEventList"
        @change="changeOpenList($event)"
        :active-text="isGetProductEventList ? $t('common.base.enableState.0') : $t('common.base.enableState.1')"
      ></el-switch>
      <el-select v-if="isGetProductEventList && !grayFunctionData.SUPER_SERVICE_RECORD" v-model="isSelectSelfHelp" :placeholder="$t('common.placeholder.select')">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <el-dialog
      :title="$t('product.qrcodeSetting.rightComponent.text36')"
      :visible='dialogVisible'
      width='500px'
      :before-close="close"
    >
      {{$t('product.qrcodeSetting.rightComponent.text33')}}
      <el-input class="link-input" v-model="linkUrl"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button class="normal-btn" @click="dialogVisible = false">{{$t('common.base.cancel')}}</el-button>
        <el-button class="normal-btn" type="primary" @click="link(linkUrl)">{{$t('common.base.makeSure')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import locales from '@src/locales'
import Uploader from 'packages/BaseUpload/uploader';
import {Upload} from 'element-ui';
import * as IMApi from '@src/api/ImApi.js';
import { getQualityConfigGray } from '@src/api/ProductV2Api.js';
import { openAccurateTab } from '@src/util/platform';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { getOpenMultiLanguage } from '@hooks/useFormMultiLanguage'
import { languages } from '@src/util/languages.js';
import paasApplyTemplate from './paasApplyTemplate.vue';
import productCardItem from '@src/modules/superQrcode/component/productCardItem.vue';
/** api */
import * as ProjectManage from '@src/api/ProjectManage.ts';

export default {
  name:'right-component',
  data(){
    const isOpenMultiLanguage = getOpenMultiLanguage()
    return {
      isOpenMultiLanguage,
      copyEventIdList:[],
      copyShowFields:[],
      linkUrl:'',
      dialogVisible:false,
      linkId:null,
      title:this.nowOption.title || '',
      displayNameLanguage: null,
      notShowTitle:false,
      onlyCustomerLinkmanShow: this.nowOption.onlyCustomerLinkmanShow || 0,
      ifRegisterGuide: this.nowOption.ifRegisterGuide || false,
      hasWxAuth: false,
      wechatList: [],
      customerServiceName_: this.customerServiceName || '',
      wechatServiceUrl_: this.wechatServiceUrl || '',
      isGetProductEventList: this.nowOption.isGetProductEventList || false,
      options: [
        {
          value: 0,
          label: this.$t('product.qrcodeSetting.rightComponent.text37')
        }, {
          value: 1,
          label: this.$t('product.qrcodeSetting.rightComponent.text38')
        }
      ],
      isSelectSelfHelp: this.nowOption.isSelectSelfHelp || 0,
      isShowProgressQuery: this.progressQuery,
      isShowEnterpriseMall: this.enterpriseMall,
      imEnabled:false, // 在线客服设置总开关状态
      grayFunctionData: {},
      projectFields: [],
      taskFields: []
    }
  },
  props:{
    productCardList: {
      type: Array,
      default:()=> []
    },
    projectInfo:{
      type:Object,
      default:{}
    },
    paasList:{
      type:Array,
      default:[]
    },
    nowOption:{
      type:Object,
      default:{}
    },
    allEventList:{
      type:Array,
      default:[]
    },
    eventIdList:{
      type:Array,
      default:[]
    },
    showFields:{
      type:Array,
      default:()=>[]
    },
    rules:{
      type:Array,
      default:()=>[]
    },
    imageArray:{
      type:Array,
      default:()=>[]
    },
    customerServiceName:{
      type: String,
      default: ''
    },
    wechatServiceUrl:{
      type: String,
      default: ''
    },
    progressQuery:{
      type: Boolean,
      default: true
    },
    enterpriseMall:{
      type: Boolean,
      default: true
    },
  },
  watch:{
    nowOption:{
      handler(val){
        this.title = val.title;
        this.notShowTitle = val.notShowTitle;
        this.onlyCustomerLinkmanShow = val.onlyCustomerLinkmanShow
        this.ifRegisterGuide = val.ifRegisterGuide
        if(this.isOpenMultiLanguage){
          if(val.displayNameLanguage){
            this.displayNameLanguage = val.displayNameLanguage
          }else{
            const displayNameLanguage  = {}
            languages.forEach(i => {
              displayNameLanguage[i.languageKey] = ''
            })
            displayNameLanguage[locales.locale] = val.title
            this.displayNameLanguage = displayNameLanguage
          }
        }
        if(val.id == 'projectManage') {
          // 获取项目管理系统表单字段
          this.getProjectFields("project");
          // 获取项目任务的表单字段
          this.getProjectFields("mission");
        }
      },
      deep:true,
      immediate: true,
    },
    title(val){
      this.$emit('changeTitle', val);
    },
    notShowTitle(val){
      this.$emit('titleShow', val);
    },
    onlyCustomerLinkmanShow(val) {
      this.$emit('configChange', ['onlyCustomerLinkmanShow', val])
    },
    customerServiceName(val) {
      this.customerServiceName_ = val
    },
    wechatServiceUrl(val) {
      this.wechatServiceUrl_ = val
    },
    isGetProductEventList(val){
      this.$emit('isShowProductRecord', val);
    },
    isSelectSelfHelp: {
      immediate: true,
      handler(newValue, _) {
        this.$emit('changeState', newValue);
      }
    }
  },
  created(){
    this.getImEnabled()
  },
  mounted(){
    this.copyEventIdList = [...this.eventIdList];
    this.copyShowFields = [...this.showFields];
    this.copyShowFields.forEach(item=>{
      item.showFlag = item.showFlag == '1'
    });

    const openWeChatService = !!localStorage.getItem('openWeChatService') || false;
    if (openWeChatService) this.getAuthFlag();

    if(this.nowOption.id === 'selfService')
      this.getServiceGray()
  },
  computed: {
    titleMaxLen() {
      return this.nowOption.id === 'productRegister' ? 10 : 20
    },
    openWeChatService() {
      return !!localStorage.getItem('openWeChatService') || false;
    },
    customerServiceSource() {
      if (this.openWeChatService) {
        return [
          {
            text: this.$t('product.qrcodeSetting.rightComponent.text39'),
            value: 'shb',
          },
          {
            text: this.$t('common.fields.customerRegisteredSource.options.weChatIm'),
            value: 'wx',
          },
        ];
      }

      return [
        {
          text: this.$t('product.qrcodeSetting.rightComponent.text39'),
          value: 'shb',
        },
      ];
    },
    wechatListSource() {
      return this.wechatList.map(item => {
        return {
          text: item.wechatServiceName,
          value: item.wechatServiceUrl,
        };
      });
    },
  },
  methods:{
    /** 获取项目管理的系统字段 */
    getProjectFields(type) {
      const params = {
        tableName: type
      }
      ProjectManage.getSuperCodeGetProjectOrTaskField(params).then(res => {
        const { success , data = [] } = res;
        const fields = data.filter((field) => !field.isHidden && (field.isVisible == undefined || field.isVisible))

        if(success) {
          if(type == 'project'){
            this.projectFields = fields ;
          }else{
            this.taskFields = fields;
          }
        }
      })
    },
    /** 添加产品附件组件*/
    updateProductCard (value) {
      this.$emit('updateProductCard', value)
    },
    /** 添加paas模板 */
    addPaasTemplate (value) {
      this.$emit('changePaas', value);
    },
    /** 添加项目模板 */
    onChangProject () {
      this.$emit('updateProjectInfo', this.projectInfo)
    },
    handlerChange(e, key) {
      this.$emit('updateSelfService', {key, val: e});
    },
    // 开启产品服务记录
    changeOpenList(e) {
      this.$emit('isShowProductRecord', e);
    },
    // 在线客服类型判断
    getAuthFlag() {
      IMApi.getAuthFlag().then(res => {
        const { code, data } = res;
        if (code !== 0) return;
        this.hasWxAuth = !!data;
        sessionStorage.setItem('hasWxAuth', this.hasWxAuth);
        this.wechatList = [];
        if (data == 1) this.getWeChatKFList();
      });
    },
    // 获取微信客服列表
    getWeChatKFList() {
      IMApi.getWeChatKFList().then(res => {
        const { code, data = [] } = res;
        if (code !== 0) return;
        this.wechatList = data;
      });
    },
    updateCustomerServiceName(value) {
      if (value === 'shb') this.updateWechatServiceUrl('');
      
      this.$emit('updateCustomerServiceName', value);
    },
    updateWechatServiceUrl(value) {
      this.$emit('updateWechatServiceUrl', value);
    },
    jumpSetting() {
      // this.$platform.openTab({
      //   close: true,
      //   url: '/pcModule/setting/imSetting',
      //   id: 'ONLINE_CUSTOMER_SERVICE_SETTINGS',
      //   title: '在线客服设置',
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageSettingImSetting,
      })
    },
    getImageIndex(id){
      const index = this.imageArray.findIndex(item=>item.id === id);
      return index + 1;
    },
    close(){
      this.dialogVisible = false;
    },
    // 配置链接弹框
    linkOpen(file){
      this.dialogVisible = true;
      this.linkUrl = file.linkUrl || '';
      this.linkId = file.id;
    },
    // 配置链接
    link(linkUrl){
      if(linkUrl && !linkUrl.startsWith('http://') && !linkUrl.startsWith('https://')){
        linkUrl = `https://${linkUrl}`;
      }
      this.$emit('link', linkUrl, this.linkId);
      this.dialogVisible = false;
    },
    // 删除图片
    delImage(id){
      this.$emit('delImage', id);
    },
    handlePictureCardPreview(file){
      // this.$previewImg(file.url);
      this.$previewElementImg(file.url);
    },
    onBeforeUploadImage (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
      const isLt2M = file.size / 1024 / 1024 < 50;

      if (!isJPG) {
        this.$message.error(this.$t('common.validate.imageType'));
      }
      if (!isLt2M) {
        this.$message.error(this.$t('common.validate.imageLimit', {limit: '50mb'}));
      }
      return isJPG && isLt2M;
    },
    onExceedPic () {
      this.$message.error(this.$t('product.productType.tips.tip20', {count: '20'}));
    },
    UploadImagePic (param) {
      Uploader.upload(param.file, '/files/upload')
        .then((result) => {
          if (result.status != 0) {
            this.$message({
              message: `${result.message}`,
              duration: 1500,
              type: 'error',
            });
            return;
          }

          let file = result.data;
          let item = {
            uid: param.file.uid,
            id: file.id,
            filename: file.fileName,
            // 如果后端返回url,必须使用。如果后端不返回，需要拼接
            url: file.ossUrl || file.url || `/files/get?fileId=${file.id}`,
            fileSize: file.fileSizeStr,
          };
          this.$emit('upload', item);
        })
        .catch((err) => {
          console.warn(err);
        })
        .finally(() => { });
    },
    checkRule(id){
      this.$emit('checkRule', id);
    },
    changeEventType(ids){
      this.copyEventIdList = ids;
      this.$emit('changeEvent', ids);
    },
    jump(){
      const id = this.nowOption.id;
      if(id === 'productPicture' || id === 'productIntroduction' || id === 'productVideo' || id === 'productInstructions' || id === 'knowledgeBase' || id === 'productPart'){
        // this.$platform.openTab({
        //   id: 'M_PRODUCT_CATALOG',
        //   title: '产品类型列表',
        //   url: '/productV2/catalog/list',
        //   reload: true,
        // });
        openAccurateTab({
          type: PageRoutesTypeEnum.PageProductCatalogList,
          reload: true,
        })
        // let fromId = window.frameElement.getAttribute('id');

        // this.$platform.openTab({
        //   id: 'productV2_catalog_edit',
        //   title: '新建产品类型',
        //   url: '/productV2/catalog/edit?notOpen=true',
        //   reload: true,
        //   close: true,
        //   fromId,
        // });
      }else if(id === 'productInformation'){
        // this.$platform.openTab({
        //   id: 'PRODUCT_MANAGEMENT_LEVEL',
        //   title: '产品设置',
        //   url: '/setting/product/fields',
        //   reload: true,
        // });
        openAccurateTab({
          type: PageRoutesTypeEnum.PageSettingProduct,
          reload: true,
        })
      }else if(id === 'onlineService'){
        this.$parent.back();
      }else if(id === 'enterpriseInformation' || id === 'companyInfo'){
        // this.$platform.openTab({
        //   id: 'ACCOUNT_COMPANY',
        //   title: '公司设置',
        //   url: '/foundation/account/company',
        //   reload: true,
        // });
        openAccurateTab({
          type: PageRoutesTypeEnum.PageFeAccountCompany,
          reload: true,
        })
      }else if(id === 'onlineMall'){
        // this.$platform.openTab({
        //   id: 'BASIC_SETTINGS',
        //   title: '自助门户设置',
        //   url: '/setting/doMyself/doMyselfSet',
        //   reload: true,
        // });
        openAccurateTab({
          type: PageRoutesTypeEnum.PageDoMyselfSet,
          reload: true,
        })
      }
    },
    // / 获取在线客服设置总开关状态
    async getImEnabled() {
      try {
        const { code, data = false } = await IMApi.getImEnabled();
        if (code !== 0) return;
        this.imEnabled = !!data;
      } catch (error) {
        console.error('error', error);
      }
    },
    getServiceGray() {
      getQualityConfigGray({
        code: 'SUPER_SERVICE_RECORD'
      }).then(res => {
        if (res.succ) this.grayFunctionData = res.data || {}
      }).catch(err => console.log(err, 'err'))
    },
    // 小地球保存
    multiLanguageSave(data){
      // 中文数据回填
      if(this.title !== data[locales.locale]){
        this.title = data[locales.locale]
        this.$emit('changeTitle', data[locales.locale]);
      }
      this.$emit('multiLang', data)
    }
  },
  components:{
    [Upload.name]:Upload,
    [paasApplyTemplate.name]:paasApplyTemplate,
    [productCardItem.name]:productCardItem,
  }
}
</script>
<style lang="scss" scoped>
// UI居然不想要动画效果
::v-deep .el-upload-list__item {
  transition: none !important;
}
.m-top-30{
  margin-top: 30px;
}
.title-checkbox{
  margin-bottom: 12px;
}
.linkmanonly {
  margin-top: 12px;
}
.product-checkbox {
  margin-top: 10px;
}
.product-service {
  margin-top: 12px;
  .product-title {
    height: 22px;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    line-height: 22px;
  }
  ::v-deep .el-select {
    width: 100%;
    margin-top: 10px;
  }
}
.upload-img{
  font-weight: bold;
  margin: 10px 0;
}
.img-text{
  margin:12px 0;
  line-height: 16px;
}
::v-deep .el-upload--picture-card{
  width: 100%;
  height: 36px;
  line-height: 36px;
  border: 1px solid $color-primary;
  background-color: $color-primary-light-1;
  color: $color-main;

  i{
    font-size: 14px;
    font-weight: bold;
    margin-right: 6px;
    color: $color-main;
  }
}
.upload-icon{
  font-size: 20px;
}
.custom-wrapper{
  margin-bottom: 6px;
  background-color: $bg-color-l3;
  height: 110px;
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;

  ul{
    padding-left: 0;
    li{
      margin-bottom: 8px;
      width: 160px;
    }
    .img-name{
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      span{
        color: $text-color-secondary;
      }
    }
    .img-link{
      width: 200px;
      .el-button{
        max-width: calc(100% - 50px);
        margin-left: 2px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        font-weight: normal;
      }
      .iconfont{
        font-size: 12px;
        color: $text-color-secondary;
        cursor: pointer;
      }
    }
  }
  
  .custom-right{
    width: 64px;
    p{
      margin-bottom: 6px;
      float: right;
      color: $text-color-secondary;
      cursor: pointer;
    }
    .img{
       width: 64px;
       height: 64px;
     img{
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      border-radius: 4px;
     }
    }
  }
}
::v-deep .el-upload-list--picture-card .el-upload-list__item{
  width: 100%;
  height: 110px;
  margin: 2px 0 0 0;
  border:none;
}
.link-input{
  width: calc(100% - 70px);
}
.el-button{
  font-size: 14px;
  padding: 0;
}
.normal-btn{
  font-size: 12px;
  padding: 9px 15px;
}
.right-wrapper{
  position: relative;
  height: 100%;
  overflow-y: auto;
  padding: 0 12px 0 0;
  .title{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    span{
      font-size: 12px;
      font-weight: normal;
      margin-left: 10px;
      color: $text-color-secondary;
    }
  }
  .title-input{
    margin-bottom: 10px;
  }
  
  .customer-service {
    h4 {
      margin-bottom: 12px 0;
    }

    .error-content {
      margin: 0 0 6px 10px;
      color: #f56c6c;

      span {
        color: #4553fa;
        cursor: pointer;
      }
    }
  }

  .introduce{
    color: $text-color-secondary;
    font-size: 12px;
    .el-button{
      font-size: 12px;
    }
  }
  .service{
    padding: 12px;
    margin-top: 10px;
    background-color: $bg-color-l3;
    .service-title{
      font-weight: bold;
      margin-bottom: 6px;
    }
    .service-content{
      color: $text-color-secondary;
      font-size: 13px;
    }
    .service-switch {
      display: flex;
      justify-content: flex-end;
    }
    .error-wrapper{
      display: flex;
      .error-icon{
        color: $color-danger;
        margin-right: 6px;
      }
    }
    ::v-deep .el-select {
      width: 100%;
      margin-top: 10px;
    }
    ::v-deep .el-card__body{
      padding: 10px;
    }
    .box-card{
      margin-top: 10px;
      a{
        color: $color-main;
        float: right;
        &:hover{
          text-decoration: none;
        }
      }
      p{
        margin-bottom: 0;
        margin-top: 5px;
      }
    }
  }
  .waring{
    background-color: #fffbe6;
    border: 1px solid #ffe58f;
    border-radius: 2px;
    color: $text-color-regular;
    padding: 12px;
    margin-bottom: 10px;
  }

  .field-title{
    font-weight: bold;
    margin: 10px 0;
  }
  .field-wrapper{
    height: calc(100vh - 350px);
    overflow-y: auto;
    padding-left: 0;
    .must{
      color:$text-color-secondary;
    }
  }
  .form-type-text-lang{
    display: flex;
    input{
      height: 32px;
      flex: 1;
    }
    p{
      width: 32px;
      height: 32px;
      background: #F5F8FA;
      border-radius: 4px;
      border: 1px solid #CBD6E2;
      text-align: center;
      line-height: 30px;
      margin-left: 8px;
      .iconfont{
        font-size: 18px;
        color: #595959;
      }
    }
  }
}
</style>
